<div class="rightDiv">
  <div class="exciseTableDiv">
    <div class="aRow tableTop">
      <button nz-button nzType="primary" (click)="addBtn()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        <span>新增</span>
      </button>
    </div>
    <div class="tableDiv">
      <nz-table #expandTable [nzShowPagination]="false" [nzData]="tree">
        <thead>
        <tr>
          <th nzWidth="30%">菜单名称</th>
          <th>链接</th>
          <th nzWidth="12%">
            排序
            <p style="color: #aaa;font-size: 12px;">值越小，排序越高</p>
          </th>
          <th nzWidth="10%">可见性</th>
          <th nzWidth="250px">操作</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let data of tree">
          <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
            <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
              <td
                [nzIndentSize]="item.level * 20"
                [nzShowExpand]="item.children.length>0"
                [(nzExpand)]="item.expand"
                (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)"
              >
                {{ item.title }}
              </td>
              <td>{{ item.url }}</td>
              <td>{{ item.showLevel }}</td>
              <td>{{ item.status ? '显示' : '隐藏' }}</td>
              <td>
                <span class="operaFont firOpera" (click)="editMenu(item.key,true)" title="查看">查看</span>
                <span class="operaFont firOpera" (click)="editMenu(item.key,false)" title="编辑">编辑</span>
                <span class="operaFont firOpera" [hidden]="item.status === 0 || item.status===null"
                      (click)="addMenuOwn(item.key)"
                      title="添加子菜单">添加子菜单</span>
                <span class="operaFont"
                      nz-popconfirm
                      nzOkType="danger"
                      [nzTitle]="'确定删除菜单节点('+item.title+')吗?'"
                      (nzOnConfirm)="deleteMenu(item.key)"
                      nzPlacement="top"
                      title="删除"
                >删除
                  </span>
              </td>
            </tr>
          </ng-container>
        </ng-container>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>


<!--新增菜单-->
<nz-modal [(nzVisible)]="isAddEdit"
          nzWidth="535px"
          [nzMaskClosable]="false"
          [nzTitle]="modalTitle"
          [nzContent]="modalContent"
          (nzOnCancel)="isAddEdit = false"
          [nzFooter]="footModel"
          nzMaskClosable="false"
>
  <ng-template #modalTitle>
    <span *ngIf="!menu.id">新增菜单</span>
    <span *ngIf="menu.id&&(!isEdit)">编辑菜单</span>
    <span [hidden]="!isEdit">查看菜单</span>
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" style="max-height: 361px;overflow: auto;">
      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired nzFor="parentId">
          上级菜单
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <nz-tree-select
            style="width: 100%"
            nzPlaceHolder="请选择上级菜单"
            [nzNodes]="cascader"
            [nzDefaultExpandAll]="true"
            [nzAllowClear]="false"
            [nzDisabled]="isEdit"
            [(ngModel)]="menu.parentId"
            formControlName="parentId"
            [nzMultiple]="false"
            [nzDropdownStyle]="{height:'230px'}"
          >
          </nz-tree-select>
          <nz-form-explain
            *ngIf="validateForm.get('parentId')?.dirty && validateForm.get('parentId')?.errors"
          >
            <ng-container *ngIf="validateForm.get('parentId')?.hasError('required')">
              菜单根节点必选
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired nzFor="name">
          菜单名称
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">{{menu.name}}</span>
          <input [hidden]="isEdit" nz-input placeholder="请输入菜单名称" formControlName="name" [(ngModel)]="menu.name"/>
          <nz-form-explain
            *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors"
          >
            <ng-container *ngIf="validateForm.get('name')?.hasError('required')">
              菜单名称必填
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired nzFor="type">
          类型
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.type === 0 ? '菜单' : (menu.type === 1 ? '按钮' : '其他')}}
          </span>
          <nz-select [hidden]="isEdit" style="width: 120px;" [(ngModel)]="menu.type" formControlName="type" nzAllowClear
                     nzPlaceHolder="请选择">
            <nz-option [nzValue]="0" nzLabel="菜单"></nz-option>
            <nz-option [nzValue]="1" nzLabel="按钮"></nz-option>
            <nz-option [nzValue]="2" nzLabel="其他"></nz-option>
          </nz-select>
          <nz-form-explain
            *ngIf="validateForm.get('type')?.dirty && validateForm.get('type')?.errors"
          >
            <ng-container *ngIf="validateForm.get('type')?.hasError('required')">
              菜单类型必选
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzFor="status">
          可见性
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.type ? '显示' : '隐藏'}}
          </span>
          <nz-radio-group [hidden]="isEdit" [(ngModel)]="menu.status" formControlName="status">
            <label nz-radio [nzValue]="1">显示</label>
            <label nz-radio [nzValue]="0">隐藏</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired nzFor="url">
          链接
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.url}}
          </span>
          <input [hidden]="isEdit" nz-input placeholder="请输入" [(ngModel)]="menu.url" formControlName="url"/>
          <div [hidden]="isEdit" class="formTips">
            <span>点击菜单跳转的页面</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzFor="targetType">
          目标
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.targetType === 0 ? '内部系统' : (menu.targetType === 1 ? '新窗口打开' : '第三方链接')}}
          </span>
          <nz-select [hidden]="isEdit" style="width: 120px;" [(ngModel)]="menu.targetType" formControlName="targetType"
                     nzAllowClear
                     nzPlaceHolder="请选择">
            <nz-option [nzValue]="0" nzLabel="内部系统"></nz-option>
            <nz-option [nzValue]="1" nzLabel="新窗口打开"></nz-option>
            <nz-option [nzValue]="2" nzLabel="第三方链接"></nz-option>
          </nz-select>
          <div class="formTips" [hidden]="isEdit">
            <span>链接打开方式</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired nzFor="showLevel">
          排序
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.showLevel}}
          </span>
          <nz-input-number
            [hidden]="isEdit"
            [nzMin]="1"
            [nzMax]="1000"
            [nzStep]="1"
            [nzPlaceHolder]="'请输入'"
            [(ngModel)]="menu.showLevel"
            formControlName="showLevel"
          ></nz-input-number>
          <div class="formTips" [hidden]="isEdit">
            <span>升序、值越小、排序越高</span>
          </div>
          <nz-form-explain
            *ngIf="validateForm.get('showLevel')?.dirty && validateForm.get('showLevel')?.errors"
          >
            <ng-container *ngIf="validateForm.get('showLevel')?.hasError('required')">
              排序等级必填
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzFor="icon">
          图标
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            <span [class]="menu.icon"></span>
          </span>
          <input [hidden]="isEdit" nz-input placeholder="请输入" [(ngModel)]="menu.icon" formControlName="icon"/>
          <div [hidden]="isEdit" class="formTips">
            <span>输入菜单图标的class值。如：fa fa-home</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="5" nzFor="remark">
          备注
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <span [hidden]="!isEdit">
            {{menu.remark}}
          </span>
          <input [hidden]="isEdit" nz-input placeholder="请输入" [(ngModel)]="menu.remark" formControlName="remark"/>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #footModel>
    <div [hidden]="isEdit">
      <button nz-button nzType="default" (click)="isAddEdit = false">取消</button>
      <button nz-button nzType="primary" [disabled]="!validateForm.valid" (click)="submit()">保存</button>
    </div>
  </ng-template>
</nz-modal>
